<template>
  <div class="journal-list">
    <div class="journal-default journal-add" @click="handleAdd">
      <span class="el-icon-plus color-success"></span>
      <p class="color-success">新增书籍</p>
    </div>
    <el-checkbox-group v-model="checkList">
      <div
        :class="['journal-default', 'journal-item', isCheckedClass(item)]"
        v-for="item in tableData"
        :key="item.id"
      >
        <el-checkbox
          :label="item.id"
          class="file-checkbox"
          @change="handleCheckboxChange"
        ></el-checkbox>
        <div class="img-box" @click="handleEdit(item)">
          <img :src="coverJournalImg(item)" alt="" />
        </div>
        <div class="txt-box" @click="handleEdit(item)">
          <h2 class="sheng">{{ item.name }}</h2>
          <p>{{ item.pubTime | timecycleYMD }}</p>
        </div>
      </div>
    </el-checkbox-group>
    <div style="clear: both"></div>
    <Pagination
      v-show="parseInt(pageObj.count) > 0"
      :total="parseInt(pageObj.count)"
      @change="getList"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
    />
  </div>
</template>
<script>
import setInfo from '@/mixins/setInfo.js'
export default {
  mixins: [setInfo],
  data() {
    return {
      checkList: [],
      listQuery: {
        columnId: '',
        page: 1,
        limit: 9,
      },
      tableData: [],
      pageObj: {},
    }
  },
  props: ['curColumn'],
  watch: {
    'curColumn.id': {
      immediate: true,
      handler() {
        this.getList()
      },
    },
  },
  computed: {
    isCheckedClass() {
      return (item) => {
        return this.checkList.indexOf(item.id) != -1 ? 'selected' : 'unselect'
      }
    },
  },
  mounted() {
    this.$bus.$on('refreshJournalList', (v) => {
      if (v) {
        Object.assign(this.listQuery, v)
      }
      this.getList()
    })
  },
  beforeDestroy() {
    this.$bus.$off('refreshJournalList')
  },
  methods: {
    async getList() {
      this.listQuery.columnId = this.curColumn.id
      let res = await this.$store.dispatch('querySysJournal', this.listQuery)
      this.tableData = res.data
      this.pageObj = res
      this.checkList = []
    },
    handleCheckboxChange() {
      this.$bus.$emit('deleteBatchJournal', this.checkList)
    },
    handleAdd() {
      this.$bus.$emit('columnJournalAdd')
    },
    handleEdit(row) {
      this.$store.commit('changeJournalFlag', false)
      this.$store.commit('setCurJournal', row || {})
      this.$bus.$emit('columnJournalAdd', row)
    },
    handleDelete(row) {
      this.deleteTips(() => {
        this.delete(row)
      })
    },
    async delete(row) {
      await this.$store.dispatch('deleteSysJournal', row)
      this.getList()
    },
  },
}
</script>
<style scoped lang="scss">
.journal-list {
  height: 745px;
  overflow-y: auto;
  .journal-default {
    float: left;
    width: 200px;
    border: 1px solid #eee;
    border-radius: 5px;
    margin: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
      transform: translate3d(0, -2px, 0);
    }
  }
  .journal-add {
    padding: 56px 10px;
    span {
      font-size: 100px;
      margin: 40px 0;
    }
    p {
      font-size: 16px;
    }
  }
  .journal-item {
    position: relative;
    padding: 10px 10px;
    overflow: hidden;
    &.selected {
      background-color: #f2faff;
      .file-checkbox {
        display: block;
      }
    }
    .file-checkbox {
      position: absolute;
      left: 0;
      top: 0;
      // display: none;
      width: 35px;
      height: 35px;
      background: #fff;
      border-radius: 3px;
      box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
    }
    &:hover {
      .file-checkbox {
        display: block;
      }
    }
    .img-box {
      width: 100%;
      height: 240px;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .txt-box {
      h2 {
        font-size: 18px;
        color: #333;
      }
      p {
        font-size: 14px;
        color: #666;
      }
    }
  }
}
</style>
<style scoped>
.file-checkbox >>> .el-checkbox__label {
  display: none;
}
</style>